<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="../../../attr.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="${ctx}/css/H-ui.min.css" />
		<script type="text/javascript" src="${ctx}/js/jquery.js"></script>
		<style>
		    p{margin-bottom: 0;font-size: 11px;}
		    .stock,.list{margin:20px auto;clear: both;overflow: hidden;}
			.stock ul{display: flex;}
			
			.stock ul li:nth-of-type(2) img{width:80%;}
			
			.stock ul li{margin-left: 15px;cursor: pointer;}
			
			.item_name{height: 60px;background: #CCCCCC;}
			
			.item_name p{margin-bottom: 0;}
			
			.item_name span{color: #FF0000;}
			
			.stock h6{display:none;font-size: 12px;font-weight: normal;text-align: right;height: 50px;background: rgba(0,0,0,0.5);line-height: 50px;margin:0;color: #fff;}
		
			.relative img{display: block;width: 100%;}
			
			.row2{margin-top: 10px;clear: both;overflow: hidden;}
			
			.row{clear: both;overflow: hidden;}
			
			.Hidden{display: flex;justify-content: space-between;}
			
			.Apply{display: flex;justify-content: space-between;font-size: 12px;}
			
			.Apply a{font-size: 10px;color: yellow;display: flex;}
			
			.Apply a:hover{color: yellow;text-decoration: none;}
			
			.Apply label{font-size: 10px;display: flex;}
			
			.Apply label input{width: 100px;}
			
			table tr{border-bottom: 1px solid #CCCCCC;height: 50px;}
			
			.Click{display:flex;height:60px;line-height:42px;border-bottom:1px dashed #cccccc;}
			
			.Click ul{display: flex;margin:10px 0;}
			
			.Click ul:nth-of-type(1) li:nth-of-type(2) img{width:18%;}
			
			.Click ul li:nth-of-type(2){margin-left: 10px;color:#D6D6D6;}
			
			.text-c{position: relative;}	
			
			.hideimg{position: absolute;top:36px;left:359px;z-index: 1;display: none;}	
			body>p{height:50px;text-align:center;line-height:50px;border-bottom:1px solid #EAEAEA;font-size:16px;}
			.ullist{display:flex;justify-content: space-around;}
			.ullist li{cursor: pointer;color:#D6D6D6}
			.ullist li img{width:15%;}
			.seainput{height:30px;border:1px solid #3399ff;width:20%;border-radius: 12px;margin-top:15px;}
</style>
	</head>
	<body>
	    <p>产品管理</p>
		<div class="container Click">
			<ul>
			   <li><img src="${ctx}/imgs/lb.png" alt="" id="button" style="cursor: pointer;width:18%"/></li>
			   <li ><img src="${ctx}/imgs/sx.png" alt=""/>刷新</li>
			</ul>
			<ul class="ullist" style="width:50%;margin-left:50px;">
			    <li class="icon01"><img src="${ctx}/imgs/icon08.png" alt=""   />添加</li>
			    <li class="icon02"><img src="${ctx}/imgs/icon09.png" alt=""  width="15%"/>删除</li>
			    <li class="icon03"><img src="${ctx}/imgs/icon_10.png" alt=""   />修改</li>
			</ul>
			<input type="text" name="" id="" class="seainput"  placeholder="请输入产品名称">
		</div>
		<div class="container stock" id="stock22">
			
			<div class="row">
				
				<div class="maskWraper col-sm-3 col-xs-3 relative">
					<img src="${ctx}/imgs/kc_hua.jpg" alt="" />
					<p>名称：<span></span></p>
                    <div class="Hidden">
                    	<small>单位：包<span></span></small>
                    	<small>单价：<span>元</span></small>
                    	<small>库存：<span>454644</span></small>
                    </div>
                    <div class="Hidden">
                    	<small>规格：0</small>
                    	<small>包装信息：50包/盒</small>
                    	<small>有效期：</small>
                    </div>
                    <p>供货单位：<span>武汉华康城科技有限公司</span></p>
                    <p>生产厂家：<span>上海浦东金环医疗用品有限公司</span></p>
                    <div class="Apply">
                    	<a href="#">立即申请</a>
                    	<label for="">申请数量：<input type="text" name="" id=""></label>
                    </div>
				</div>
			</div>
			
		</div>
		
		<div class="container list" id="list22" style="display: none;">
			<table border="0" cellspacing="" cellpadding="">
				<tr class="text-c">
					<td>
						<input type="checkbox" />
					</td>
					<td>产品名称</td>
					<td>款号</td>
					<td>产品类别</td>
					<td>产品价格</td>
				</tr>
				
			</table>
		</div>
        <script>
        	$(function(){
        		$('#button').click(function(){
        			var status = $('#stock22').css('display');//获取当前div的状态，是隐藏还是显示的
        			if(status == 'block'){
        				$('#stock22').hide();
        				$("#list22").show();
        				
        			}else{
        				$('#stock22').show();
        				$("#list22").hide();
        			}
        			
        		})
        	})
             $(function(){
             	$('.clickimg').mouseover(function(){
             		var imageYY = $(this).parent().find("td").eq(3);//寻找到需要显示图片的每个td
            		$(imageYY).show();
            		return false;//触发一次鼠标事件后停止触发
             	})
             	$('.clickimg').mouseout(function(){
             		var imageYY = $(this).parent().find("td").eq(3);
            		$(imageYY).hide();
             	})
             })
        </script>
	</body>
</html>
